<!DOCTYPE html>
<html lang="en">
<head>
  <title>long ajax request</title>
  <meta charset="UTF-8">
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  <script type="text/javascript" src="jquery.min.js"></script>
  <script type="text/javascript">
      var commandDuration = 100;

      function runLongAjaxRequest() {
        $("#results").html("<span id='loading'>Loading...</span><br/><ul></ul>");
        setTimeout(function() {$("#results ul").append("<li>Result 1<span id='result-1'>r1</span></li>");}, commandDuration*3);
        setTimeout(function() {$("#results ul").append("<li>Result 2<span id='result-2'>r2</span></li>");}, commandDuration*4);
        setTimeout(function() {$("#loading").remove();}, commandDuration*10);
      }
  </script>
</head>
<body>
<h1>The long ajax request test</h1>
<button onclick="runLongAjaxRequest()">Run long request</button>
<div id="results">
</div>

<table id="multirowTable" style="border: 1px;">
  <tbody>
  <tr>
    <td class="first_row">Chack</td>
    <td>Norris</td>
  </tr>
  <tr>
    <td class="second_row">Chack</td>
    <td>Lä Baskerville</td>
  </tr>
  </tbody>
</table>
</body>
</html>
